<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <a href="#/a">/a</a>
      <a href="#/b">/b</a>
    </div>
    <div id="id"></div>
    <script>
      const dom = document.getElementById('id');
      window.addEventListener('hashchange', (e) => {
        console.log(e.type, e);
        dom.innerHTML = location.hash.substring(1);
      });

      function test() {
        const path = '11'
        setTimeout(() => {
          history.pushState({ path }, '', '/a');
        }, 1000);

        setTimeout(() => {
          history.pushState({ path }, '', '/b');
        }, 2000);
        setTimeout(() => {
          history.pushState({ path }, '', '/c');
        }, 3000);
        setTimeout(() => {
          history.back();
        }, 4000);
        setTimeout(() => {
          history.pushState({ path }, '', '/d');
        }, 5000);
      }
      test();
    </script>
  </body>
</html>
